import React from 'react';
import { Link } from 'react-router-dom';

import styles from './index.module.less';

/*
* @author JinHang
* @description 顶部的导航
* @date 2018/10/22 15:53
* @param {}
* @return {}
* */
export default class Nav extends React.Component {
  render() {
    return (
      <div className={styles.header}>
        <div className={`${styles.container} clearfix`}>
          <ul className={styles.pullLeft}>
            <li>
              <div className={styles.getApp}>
                <i className={`iconfont icon-shouji ${styles.mobileIcon}`} />
                <span>手机APP</span>
              </div>
            </li>
            <li>
              <span className={styles.location}>位置：大连 ∨</span>
            </li>
            <li>
              <Link className={styles.login} to="/login">
                登录
              </Link>
            </li>
            <li>
              <Link className={styles.logout} to="/register">
                免费注册
              </Link>
            </li>
          </ul>
          <ul className={styles.pullRight}>
            <li>
              <Link className={styles.home} to="/">
                首页
              </Link>
            </li>
            <li>
              <ul className={styles.center_box}>
                <li className={styles.buyer_center}>
                  <div>买家中心 ∨</div>
                  <div className={styles.buyer_center_box}>
                    <dl>
                      <dd>订单中心</dd>
                      <dd>
                        <Link to="/shopping-cart">购物车</Link>
                      </dd>
                      <dd>优惠卷</dd>
                    </dl>
                  </div>
                </li>
                <li className={styles.seller_center}>
                  <div>卖家中心 ∨</div>
                  <div className={styles.buyer_center_box}>
                    <dl>
                      <dd>订单管理</dd>
                      <dd>店铺管理</dd>
                      <dd>商品管理</dd>
                    </dl>
                  </div>
                </li>
                <li className={styles.favorite}>
                  <div>
                    <i className={`iconfont icon-shoucang1 ${styles.starIcon}`} />
                    收藏夹
                  </div>
                  <div className={styles.buyer_center_box} style={{ height: '70px' }}>
                    <dl>
                      <dd>货品收藏夹</dd>
                      <dd>商铺收藏夹</dd>
                    </dl>
                  </div>
                </li>
              </ul>
            </li>
            <li>
              <Link className={styles.notice_center} to="/notice">
                公告中心
              </Link>
            </li>
            <li>
              <Link className={styles.rules_center} to="/rules-center">
                规则中心
              </Link>
            </li>
            <li>
              <Link className={styles.help_center} to="/help">
                帮助中心
              </Link>
            </li>
            <li>
              <Link className={styles.about_horde} to="/company-profile">
                关于蜂收部落
              </Link>
            </li>
          </ul>
        </div>
      </div>
    );
  }
}
